tips de la communauté

Elargir les images sur toute la page

Exemple d'une classe à appliquer à vos vignettes pour élargir l'image à la taille des pages

.fullWidthImage{
   overflow:visible!important;
   img{
      width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
   }
}

Appliquez des filtres sur vos images

Rendez-vous par exemple sur fecolormatrix.com ou kroma.com pour générer un filtre de couleur.

Ensuite ajoutez ce bout de code (contenant votre filtre SVG) dans la partie "code javascript" de votre site :

window.onload =((event) => {
document.body.insertAdjacentHTML('beforeend', `<svg id="filter"  style="visibility: hidden; position: absolute;">
<filter color-interpolation-filters="srgb" x="0" y="0" height="100%" width="100%" >
<fecolormatrix type="matrix" values="0.95703125 0 0 0 0.01953125 0.6953125 0 0 0 0.2734375 0.2578125 0 0 0 0.390625 0 0 0 1 0"></fecolormatrix>
</filter>
</svg>`);});

Ensuite ajoutez ce CSS dans les styles avancé de vos pages ou de votre site :

.vignette{
    filter: url("#filter");
    -webkit-filter: url("#filter");
}

centrer les titres des vignettes

Ajoutez le CSS suivant dans les styles du site :

.vignette .title{
  justify-content: center!important;
  text-align: center;
  align-self: center;
}

renvoyer depuis une page de votre site vers une autre page de votre site

Créez un hyperlien relatif à votre site, c'est à dire sans le nom de domaine. exemple : https://monsite.eco/accueildevient /accueil Cela permettra à vos visiteurs d'avoir une navigation instantanée !

design avancé des vignettes

Editez la vignette et ajoutez une classe dans la mise en forme de la vignette que vous souhaitez designer. (Ici nous avons ajoutés une classe que nous avons nommés arbitrairement "bordsArrondis".

vignette bandeau

Ajoutez une classe à votre vignette (ici nous l'avons nommée 'pleineLargeur' et saisissez le CSS suivant dans les styles de la page ou les styles du site.

.pleineLargeur{
	min-width:100vw !important;
	max-width:unset!important;
	/* flex-basis:100vw !important; (A ajouter si la mise en page de votre page est 'page de présentation' */
}

design super avancé

Cliquez sur le bouton pour passer en mode d'édition avancé de la vignette. Vous pourrez ensuite réaliser n'importe quelle design via du HTML + CSS (comme la 1ère vignette de cette page).

Prenez soin de l'humain et de la planète du bout des doigts.

* Oui cette vignette ne sert à rien... mais c'est cool non ?